<style lang="less">
  .form-input-w {
    width: 50%;
  }
</style>

<template>
  <el-dialog title="销账" :visible.sync="dialogVisible" size="tiny" class="standard-price-add">
    <el-form label-width="100px" ref="form" :model="form">
      <el-form-item label="销账金额"
                    :rules="{required: true,type: 'number', message: '请输入销账金额', trigger: 'blur'}"
                    prop="chargeOffsAmount">
        <el-input v-model.number="form.chargeOffsAmount"  class="form-input-w"></el-input>
      </el-form-item>
      <el-form-item label="付款时间"
                    :rules="{required: true, type: 'date', message: '请选择付款时间', trigger: 'change'}"
                    prop="chargeOffsDate">
        <el-date-picker style="width: 50%"
          v-model="form.chargeOffsDate"
          type="datetime"
          placeholder="选择日期时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="到账银行"
                    :rules="{required: true, type: 'string', message: '请输入到账银行', trigger: 'blur'}"
                    prop="arrivalBank">
        <el-input v-model="form.arrivalBank"  class="form-input-w"></el-input>
      </el-form-item>
      <el-form-item label="银行卡号"
                    :rules="{required: true, type: 'string', message: '请输入银行卡号', trigger: 'blur'}"
                    prop="bankCardNumber">
        <el-input v-model="form.bankCardNumber"  class="form-input-w"></el-input>
      </el-form-item>
      <el-form-item label="银行流水号"
                    :rules="{required: true, type: 'string', message: '请输入银行流水号', trigger: 'blur'}"
                    prop="serialNumber">
        <el-input v-model="form.serialNumber"  class="form-input-w"></el-input>
      </el-form-item>
      <el-form-item label=" 备 注 ">
        <el-input type="textarea" v-model="form.description"  class="form-input-w"></el-input>
      </el-form-item>
      <el-form-item label="活动时间">
        <el-upload  class="form-input-w"
          ref="upload"
          action="/api/v2.0/admin/common_upload"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview">
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="createform" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  name: 'ChargeOffs',
  componentName: 'ChargeOffs',
  props: {},
  data () {
    return {
      dialogImageVisible: false,
      dialogVisible: false,
      loading: false,
      extendObj: null,
      form: {
        id: null,
        chargeOffsAmount: null,
        chargeOffsDate: null,
        arrivalBank: null,
        bankCardNumber: null,
        serialNumber: null,
        description: null
      }
    };
  },
  methods: {
    handlePictureCardPreview (file) {
      this.$emit('viewImg', file.response.obj);
    },
    reset: function () {
      if (this.$refs.form) {
        this.$refs.form.resetFields();
      }
      this.$ue.resetObjNull(this.form);
      if (this.$refs.upload) {
        this.$refs.upload.clearFiles();
      }
    },
    show (extendObj) {
      this.extendObj = extendObj;
      this.reset();
      this.dialogVisible = true;
      this.loading = false;
    },
    hide () {
      this.loading = false;
      this.dialogVisible = false;
    },
    createform () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let o = Object.assign({
            chargeOffsMode: 'CHARGE_OFFS_EXTRACTION',
            voucher: this.$refs.upload.uploadFiles.map(o => o.response.obj).join(';')
          }, this.form);
          this.loading = true;
          this.$emit('comfirmSuccess', this.extendObj, o);
        }
      });
    }
  },
  mounted () {
    //
  }
};
</script>
